<template>
	<view class="address-container">
		<!-- <HeadNavs :title="title"></HeadNavs> -->
		<!-- 新增收货地址按钮 -->

		<view class="box1">
			<view class="txt">收件人</view>
			<view class="namehead">
				<u--input class="input" color="#fff" input-align="right" v-model="fromData.receiver" placeholder="请输入姓名" border="none"></u--input>
			</view>
		</view>
		<view class="box1">
			<view class="txt">手机号</view>
			<view class="namehead">
				<u--input class="input" color="#fff" input-align="right" v-model="fromData.phone" placeholder="请输入手机号" border="none"></u--input>
			</view>
		</view>
		<view class="box1">
			<view class="txt">收货地址</view>
			<view class="namehead" @click="showCity = true">
				<u--input class="input" color="#fff" input-align="right" v-model="address" placeholder="请选择省、区、市" border="none"></u--input>
				<u-icon style="margin-left: 10rpx; margin-top: 10rpx" color="#fff" name="arrow-down"></u-icon>
			</view>
		</view>
		<view class="box1 box">
			<view class="txt">详细地址</view>
			<view class="textarea">
				<u--input
					type="textarea"
					color="#fff"
					class="input"
					style="padding-bootom: 115rpx; width: 500rpx"
					v-model="fromData.address"
					input-align="right"
					placeholder="街道、街牌号等"
					border="none"
				></u--input>
				<view class="text">{{fromData.address.length}}/100</view>
			</view>
		</view>
		<view class="moren">
			<u-checkbox-group active-color="#3cbdf0" size="30rpx" shape="circle" class="checkbox">
				<u-checkbox @change="checkboxChange" :checked="checked"></u-checkbox>
			</u-checkbox-group>
			<view class="text">设置默认收获地址</view>
		</view>
		<view class="address-btn" @click="throttleConfirm">确认</view>

		<cPicker :isCity="true" level="3" keyName="name" :show.sync="showCity" :value.sync="valueCity" class="picker">
			<!-- <view class="item">地区:
				<view v-if="valueCity">[fvalueCity.map(i=>i.name).join('-")}}</view>
			</view> -->
		</cPicker>
	</view>
</template>

<script>
import cPicker from '../../../components/addressPicker/c-picker.vue';
import { addAddress, updateAddress } from '@/api/account/account.js';
import { toast, showConfirm, tansParams } from '@/utils/common';
export default {
	components: {
		cPicker
	},
	data() {
		return {
			checked: false,
			showCity: false,
			valueCity: [], //默认值
			address: '', //前端展示的
			title: '新增收货地址',
			fromData: {
				id: 0,
				isDefault: 1, //是否默认地址(0是,1否)
				receiver: '', //收货人
				phone: '', //联系电话
				province: '', //省
				city: '', //市
				county: '', //县区
				address: '', //详细地址
				orgDefaultId: 0
			},
			throttling: false, // 初始时不处于节流状态
			showError: false // 标志变量，用于控制是否显示错误消息
			// userAddressApp/add   新增地址
		};
	},
	onLoad(option) {
		if (option.id) {
			this.fromData.id = option.id;
			this.fromData.isDefault = option.isDefault;
			this.fromData.receiver = option.receiver;
			this.fromData.phone = option.phone;
			this.fromData.province = option.province;
			this.fromData.city = option.city;
			this.fromData.county = option.county;
			this.fromData.address = option.address;
			this.title = '修改收货地址';
			// console.log(option.isDefault);
			this.fromData.orgDefaultId = option.orgDefaultId;
			if (option.isDefault == 0) {
				this.checked = true;
			}
			// let param = [
			// 	{name:option.province},
			// 	{name:option.city},
			// 	{name:option.county}
			// ]
			// this.valueCity = param;
			this.address = option.province + '-' + option.city + '-' + option.county;
		}
	},

	watch: {
		valueCity(newData, oldData) {
			this.address = newData.map((i) => i.name).join('-');
			this.fromData.province = newData[0].name;
			this.fromData.city = newData[1].name;
			this.fromData.county = newData[2].name;
		}
	},
	methods: {
		// 设置选中
		checkboxChange(n) {
			if (n) {
				this.fromData.isDefault = 0;
			} else {
				this.fromData.isDefault = 1;
			}
		},
		// 提交新增地址
		async confirmAddress() {
			let phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
			if (this.fromData.receiver == '') {
				toast('请输入收件人');
			} else if (this.fromData.phone == '') {
				toast('请输入手机号');
			} else if (!phoneReg.test(this.fromData.phone)) {
				toast('请正确输入手机号');
			} else if (this.address == '') {
				toast('收货地址不能为空');
			} else if (this.fromData.address == '') {
				toast('请输入详细地址');
			} else {
				let res = null;
				if (this.fromData.id) {
					// console.log(123);
					// id为真的情况下是修改
					res = await updateAddress(this.fromData);
				} else {
					//新增
					// console.log(456);
					res = await addAddress(this.fromData);
				}
				if (res.code == 200) {
					toast('添加成功');
					// setTimeout(function () {
					// 	uni.navigateTo({
					// 		url: '/pages/AccountSecurity/Shipping/Shipping'
					// 	});
					// }, 700);
				}
			}
		},
		throttleConfirm() {
			if (!this.throttling) {
				// 如果没有处于节流状态，执行你的按钮点击逻辑
				this.confirmAddress();
				// 设置节流状态为 true，并在一定时间后恢复为 false
				this.throttling = true;
				setTimeout(() => {
					this.throttling = false;
				}, 5000); // 1000毫秒（1秒）是节流的时间间隔，你可以根据需要调整
			}
		},
	}
};
</script>

<style lang="scss">

.address-btn {
	font-size: 28rpx;
	font-family: 'font';
	font-weight: 800;
	text-align: center;
	line-height:85rpx;
	color: #ffffff;
	width: 680rpx;
	height: 77rpx;
	background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
	box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	opacity: 1;
	margin-left: 34.88rpx;
	margin-top: 300rpx;
}

.moren {
	color: #fff;
	display: flex;
	font-size: 28rpx;
	font-family: 'font';
	font-weight: 400;
	color: #ffffff;

	.checkbox {
		margin-left: 80rpx;
		width: 50rpx;
	}

	.text {
		font-size: 23rpx;
		font-family: 'font';
		font-weight: 400;
		color: #787f8e;
	}
}

.box {
	border-bottom: none !important;
	width: 680rpx !important;
	height: 300rpx !important;
}

.box1 {
	width: 680rpx;
	height: 110rpx;
	border-bottom: 2rpx solid #282c34;
	text-align: center;
	line-height: 70rpx;
	margin: 0 34rpx;
	// background-color: pink;
	display: flex;
	font-size: 28rpx;
	font-family: 'font';
	color: #ffffff;
	justify-content: space-between;
	padding: 20rpx 30rpx;

	.namehead {
		display: flex;
	}
}

.textarea {
	color: #fff;
	display: flex;
	flex-direction: column;
	position: relative;

	.text {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 23rpx;
		font-family: 'font';
		font-weight: 800;
		color: #fff;
	}
}
</style>
